<template>
  <div>
    <van-nav-bar
      title="头像修改"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>

    </van-nav-bar>
    <div class="van-cell van-cell--clickable cell" @click="openAvatar">
      <van-image round width="4rem" height="4rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
      <div class="van-cell__title margin-left-10">
        <span class="user-name">头像</span>
        <br>
        <span class="user-id">地址信息</span>
      </div>
      <van-icon class="van-cell__right-icon" name="arrow" size="16" color="#969799"/>
    </div>

    <div class="van-cell van-cell--clickable cell" @click="openAdress">
      <div class="van-cell__title">
        <span>我的收货地址</span>
      </div>
      <van-icon class="van-cell__right-icon" name="arrow" size="16" color="#969799"/>
    </div>
    <div class="van-cell van-cell--clickable cell margin-top-10" @click="openSecurity">
      <div class="van-cell__title">
        <span>账号与安全</span>
      </div>
      <van-icon class="van-cell__right-icon" name="arrow" size="16" color="#969799"/>
    </div>
    <div class="van-cell van-cell--clickable cell " @click="openHelp">
      <div class="van-cell__title">
        <span>帮助反馈</span>
      </div>
      <van-icon class="van-cell__right-icon" name="arrow" size="16" color="#969799"/>
    </div>
    <van-button plain block class="out" @click="logout">退出登录</van-button>
  </div>
</template>

<script>
import {removeLocalStorage} from '@/utils/local-storage'
import {authLogout} from '@/api/user'

export default {
  name: 'index',
  methods: {
    logout () {
      authLogout().then(res => {
        removeLocalStorage('Authorization')
        window.location = '/user/'
      })
    },
    openHelp () {
      this.$router.push({name: 'help'})
    },
    openSecurity () {
      this.$router.push({name: 'security'})
    },
    openAdress () {
      this.$router.push({name: 'address'})
    },
    openAvatar () {
      this.$router.push({name: 'userInfo'})
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.margin-top-10{
  margin-top: 10px;
}
.margin-left-10 {
  margin-left: 5px;
}

.cell {
  align-items: center;
}

.out {

  margin-top: 20px;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
}

.user-id {
  color: #c5c5c5;
}
</style>
